import { mapState } from "vuex";
import { fontSizeFn } from "./formatFn"
export default {
    data() {
        return {
            chart: null,
            //搜索栏高度
            moutedFlag: false,
            topSearchHeight: undefined,
            chartHeight: null,
        }
    },
    computed: {
        //侧边栏收起展开
        ...mapState({
            opened: (state) => state.app.sidebar.opened,
        }),

    },
    watch: {
        opened(val) {
            setTimeout(() => {
                if (this.options != undefined && this.options != null) {
                    this.chart && this.chart.resize();
                }
            }, 500);
        },
        //计算图表总高度
        topSearchHeight: {
            handler() {
                this.chartHeight =
                    (window.innerHeight -
                        this.topSearchHeight -
                        localStorage.getItem("navbarHeight") -
                        8) /
                    16 /
                    3;
                if (this.topSearchHeight != undefined) {
                    this.moutedFlag = true;
                }
            },
            deep: true,
            immediate: true,
        },
    },
    mounted() {
        window.addEventListener("resize", this.handleResize);
    },
    methods: {
        handleResize() {
            this.chart && this.chart.resize();
        },
        transformFontSize(fontsize) {
            return fontSizeFn(fontsize)
        },
        initChart() {
            // 初始化 echarts
            this.chart = this.$echarts.init(this.$el, "tdTheme");
            this.handleResize()
            this.chart.setOption(this.options, true);
            //设置鼠标事件
            // this.chart.getZr().on("click", (params) => {
            //     console.log("点击");
            // });
        },
        //设置搜索栏高度
        setHeight(height) {
            this.topSearchHeight = height;
        },
    },
    destroyed() {
        window.removeEventListener("resize", this.handleResize);
    },
    beforeDestroy() {
        if (this.chart != null) {
            this.chart.dispose();
        }
        // this.chart = null;
    },
}

